<template>
  <div class="account-query-container">
    <div class="account-query">
      <ui-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm" style="{margin-left: -20px;}">
        <ui-form-item>
          <ui-row type="flex" class="row-bg" justify="space-between">
            <ui-col :span="11">
              <ui-form-item prop="type" label="客户类型" required>
                <ui-select v-model="ruleForm.type" placeholder="请选择">
                  <ui-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> </ui-option>
                </ui-select>
              </ui-form-item>
            </ui-col>
            <ui-col :span="11">
              <ui-form-item prop="institution" label="所属机构">
                <ui-select v-model="ruleForm.institution" placeholder="请选择">
                  <ui-option label="区域一" value="shanghai"></ui-option>
                  <ui-option label="区域二" value="beijing"></ui-option>
                </ui-select>
              </ui-form-item>
            </ui-col>
          </ui-row>
        </ui-form-item>
        <ui-form-item>
          <ui-row type="flex" class="row-bg" justify="space-between">
            <ui-col :span="11">
              <ui-form-item prop="type" label="管理类型" required>
                <ui-select v-model="ruleForm.type" placeholder="请选择管理类型">
                  <ui-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> </ui-option>
                </ui-select>
              </ui-form-item>
            </ui-col>
            <ui-col :span="11">
              <ui-form-item prop="institution" label="是否关注">
                <ui-select v-model="ruleForm.institution" placeholder="请选择是否关注">
                  <ui-option label="区域一" value="shanghai"></ui-option>
                  <ui-option label="区域二" value="beijing"></ui-option>
                </ui-select>
              </ui-form-item>
            </ui-col>
          </ui-row>
        </ui-form-item>
        <ui-form-item>
          <ui-row type="flex" class="row-bg" justify="space-between">
            <ui-col :span="11">
              <ui-form-item prop="type" label="客户等级" required>
                <ui-select v-model="ruleForm.type" placeholder="请选择客户等级">
                  <ui-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> </ui-option>
                </ui-select>
              </ui-form-item>
            </ui-col>
            <ui-col :span="11">
              <ui-form-item prop="institution" label="分配状态">
                <ui-select v-model="ruleForm.institution" placeholder="请选择分配状态">
                  <ui-option label="区域一" value="shanghai"></ui-option>
                  <ui-option label="区域二" value="beijing"></ui-option>
                </ui-select>
              </ui-form-item>
            </ui-col>
          </ui-row>
        </ui-form-item>
        <ui-form-item>
          <ui-row type="flex" class="row-bg" justify="space-between">
            <ui-col :span="11">
              <ui-form-item prop="type" label="客户号" required label-width="88px">
                <ui-input v-model="ruleForm.customerNo" placeholder="请输入客户号" class="input-width"></ui-input>
              </ui-form-item>
            </ui-col>
            <ui-col :span="11">
              <ui-form-item prop="institution" label="联系电话">
                <ui-input v-model="ruleForm.institution" placeholder="请输入联系电话"></ui-input>
              </ui-form-item>
            </ui-col>
          </ui-row>
        </ui-form-item>
        <ui-form-item>
          <ui-row type="flex" class="row-bg" justify="space-between">
            <ui-col :span="11">
              <ui-form-item prop="identyId" label="证件号码" required>
                <ui-input v-model="ruleForm.identyId" placeholder="请输入证件号码"></ui-input>
              </ui-form-item>
            </ui-col>
            <ui-col :span="11">
              <ui-form-item prop="name" label="客户经理">
                <ui-input v-model="ruleForm.name" placeholder="请输入客户经理名称"></ui-input>
              </ui-form-item>
            </ui-col>
          </ui-row>
        </ui-form-item>
        <ui-form-item>
          <ui-row type="flex" class="row-bg" justify="space-between">
            <ui-col :span="11">
              <ui-form-item prop="customerName" label="客户名称" required>
                <ui-input v-model="ruleForm.customerName" placeholder="请输入客户名称"></ui-input>
              </ui-form-item>
            </ui-col>
            <ui-col :span="11">
              <ui-form-item prop="labelType" label="标签类型">
                <ui-select v-model="ruleForm.labelType" placeholder="请选择">
                  <ui-option label="区域一" value="shanghai"></ui-option>
                  <ui-option label="区域二" value="beijing"></ui-option>
                </ui-select>
              </ui-form-item>
            </ui-col>
          </ui-row>
        </ui-form-item>
        <ui-form-item>
          <ui-row type="flex" class="row-bg" justify="space-between">
            <ui-col :span="11">
              <ui-form-item prop="labelName" label="标签名称" required>
                <ui-select v-model="ruleForm.labelName" placeholder="请选择">
                  <ui-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> </ui-option>
                </ui-select>
              </ui-form-item>
            </ui-col>
          </ui-row>
        </ui-form-item>
        <ui-form-item>
          <ui-row type="flex" class="row-bg" justify="center">
            <ui-button type="primary" @click="submitForm('ruleForm')">查询</ui-button>
            <ui-button @click="resetForm('ruleForm')">重置</ui-button>
            <ui-button @click="goAdancedQuery">高级查询</ui-button>
          </ui-row>
        </ui-form-item>
      </ui-form>
    </div>
    <div class="account-list">
      <div class="list-title">客户列表</div>
      <div class="list-tabble">
        <vx-table :table-data="tableData" :columns="columns" :customer-style="true" btnFixed="right">
          <template slot="operation" slot-scope="scope">
            <div class="custom-class">
              <div class="operation-icon">
                <i class="ui-icon-star-off"></i>
                <!-- <ui-icon-star-on></ui-icon-star-on> -->
                <ui-link type="danger" :underline="false">360视图</ui-link>
                <ui-link type="danger" :underline="false" @click="goHistory">归属历史</ui-link>
              </div>
            </div>
          </template>
        </vx-table>
      </div>
    </div>
    <!-- 分页器 -->
    <div class="page">
      <ui-pagination
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        background
        :page-size="10"
        layout="total, prev, pager, next, jumper"
        :total="totalPage">
      </ui-pagination>
    </div>
  </div>
</template>

<script>
import vxTable from '@/components/vx-table';
import {currency,wordcut} from '@csii/vx-util'
export default {
  name:'accountQuery',
  components: {
    vxTable,
  },
  data() {
    return {
      ruleForm: {},
      totalPage:100,
      currentPage:1,
      tableData: [
        {
          customerNo: '10086',
          customerName: '科蓝公司',
          customerType: '零售',
          phone: '15112345263',
          identify: '二代身份证',
          identifyId: '333322221111250058',
          institute: '南苑支行',
          customer: '高明',
          manegement: '主办',
          fine: '20000000',
          customerClass: 'V9',
          status: '已分配',
          labelName: '回显内容',
        },
      ],
      columns: [
        {
          prop: 'customerNo',
          label: '客户号',
          width: '80',
        },
        {
          prop: 'customerName',
          label: '客户名称',
          width: '80',
        },
        {
          prop: 'customerType',
          label: '客户类型',
          width: '80',
        },
        {
          prop: 'phone',
          label: '联系电话',
          width: '120',
          formatter: (row, column, cellValue, index) => {
            return wordcut(cellValue,3,4);
          }
        },
        {
          prop: 'identify',
          label: '证件类型',
          width: '100',
        },
        {
          prop: 'identifyId',
          label: '证件编号',
          width: '180',
          formatter: (row, column, cellValue, index) => {
            return wordcut(cellValue,0,6);
          }
        },
        {
          prop: 'institute',
          label: '所属机构',
          width: '80',
        },
        {
          prop: 'customer',
          label: '客户经理',
          width: '80',
        },
        {
          prop: 'manegement',
          label: '管理类型',
          width: '120',
        },
        {
          prop: 'fine',
          label: '金融资产',
          width: '120',
          formatter: (row, column, cellValue, index) => {
            return currency(cellValue,'',0);
          }
        },
        {
          prop: 'customerClass',
          label: '客户等级',
          width: '80',
        },
        {
          prop: 'status',
          label: '分配状态',
          width: '80',
        },
        {
          prop: 'labelName',
          label: '标签名称',
          width: '80',
        },
      ],
      options: [
        {
          value: '选项1',
          label: '黄金糕',
        },
        {
          value: '选项2',
          label: '双皮奶',
        },
        {
          value: '选项3',
          label: '蚵仔煎',
        },
        {
          value: '选项4',
          label: '龙须面',
        },
        {
          value: '选项5',
          label: '北京烤鸭',
        },
      ],
    };
  },
  methods: {
    // 跳转高级查询
    goAdancedQuery(){
      this.$router.push('/task/advancedQuery')
    },
    // 页面改变
    handleCurrentChange(){
      
    },
    // 归属历史查询
    goHistory(){
      console.log(11111)
      this.$router.push({
        path: '/task/gsAttributionHistory',
      })
    }
  },
};
</script>

<style lang="scss" scoped>
.account-query-container {
  .account-query {
    .input-width {
      padding-left: 10px;
      width: 97%;
    }
  }
  .account-list {
    margin-top: 10px;
    .list-title {
      margin-bottom: 10px;
      color: #333;
      font-weight: 600;
      font-size: 20px;
    }
    .list-tabble {
      .custom-class {
        .operation-icon {
          display: flex;
          width: 100%;
          justify-content: space-between;
          align-items: center;
        }
      }
    }
  }
  .page{
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 10px;
  }
  
}
::v-deep .ui-select {
  display: block;
}
</style>
